<template>
  <div id="app">
    <!-- 表格组件 -->
    <div>
      <heli-table
        :columns="columns1"
        :data="data1"
        @on-select="selectTable"
        @on-select-all="selectAll"
        @on-sort-change="change"
        height="200px"
      >
        <template slot="name" slot-scope="{ col, row }">{{
          row[col.key]
        }}</template>
        <template slot="operator" slot-scope="{ col, row }">
          <heli-button>删除</heli-button>
        </template>
      </heli-table>
    </div>
    <!-- 分页组件的实现 -->
    <div>
      <!-- pager-count: 指代的是 当前分页器中最多有多少个按钮 -->
      <heli-pagination
        :total="10"
        :pager-count="7"
        :current-page.sync="currentPage"
      ></heli-pagination>
    </div>
    <!-- 轮播图的实现 -->
    <div>
      <heli-carousel
        height="200px"
        :autoplay="true"
        :delay="2000"
        :initial-index="1"
        :loop="true"
        @change="handleCarouselChange"
      >
        <heli-carousel-item>
          <div class="content" style="background: red;">内容1</div>
        </heli-carousel-item>
        <heli-carousel-item>
          <div class="content" style="background: blue;">内容2</div>
        </heli-carousel-item>
        <heli-carousel-item>
          <div class="content" style="background: yellow;">内容3</div>
        </heli-carousel-item>
        <heli-carousel-item>
          <div class="content" style="background: green;">内容4</div>
        </heli-carousel-item>
      </heli-carousel>
    </div>
    <!-- 日期组件的实现 -->
    <div>
      {{ value1 }}
      <br />
      <heli-date-picker v-model="value1"></heli-date-picker>
      <!-- <heli-date-range-picker></heli-date-range-picker> -->
    </div>
    <!-- 上传组件的实现 input  "type=file" name="" ajax+formdata -->
    <div>
      <!-- 
      name: 输入框提交到后台的字段名字
      action： 提交到后端的路径
      limit： 限制提交的个数

      钩子函数：
        on-exceed： 用来如果超出限制后， 会执行此方法
        on-change： 如果当前上传文件的状态发生变化的时候，会触发， 如果用户选择了文件、上传成功、上传失败
        on-success: 成功时触发
        on-error: 失败时触发
        on-progress: 上传是多次触发
     -->

      <heli-upload
        name="avatar"
        action="http://localhost:3000/upload"
        :fileList="fileList"
        accept="image/jpeg"
        :limit="3"
        :multiple="true"
        :on-exceed="handleExceed"
        :on-change="handleChange"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-progress="handleProgress"
        :before-upload="beforeUpload"
        :drag="true"
      >
        <heli-button type="primary" icon="cloud-upload">点击上传</heli-button>
        <div slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </heli-upload>
    </div>

    <!-- 输入框的写法 -->
    <div>
      <!-- 基本 -->
      <heli-input
        type="text"
        v-model="value"
        placeholder="请输入数据"
        name="username"
      ></heli-input>
      <!-- 不可用 -->
      <heli-input
        type="text"
        v-model="value"
        placeholder="请输入数据"
        disabled
        name="username"
      ></heli-input>
      <!-- 可清除 -->
      <heli-input
        type="text"
        v-model="value"
        placeholder="请输入数据"
        name="username"
        clearable
      ></heli-input>
      <!-- 密码框 -->
      <heli-input
        type="text"
        v-model="value"
        show-password
        placeholder="请输入密码"
        name="username"
      ></heli-input>
      <!-- 前图标， 后图标 -->
      <heli-input
        type="text"
        v-model="value"
        placeholder="请输入数据"
        name="username"
        prefix-icon="calendar"
      ></heli-input>
      <heli-input
        type="text"
        v-model="value"
        placeholder="请输入数据"
        name="username"
        suffix-icon="calendar"
      ></heli-input>
      <!-- <heli-input
      maxlength="20"
      minlength="4"
      show-word-limit
      size="small"
    ></heli-input> -->
      {{ value }}
    </div>

    <!-- +++++++++++++++++++++ -->
    <div>
      <heli-button type="primary">默认按钮</heli-button>
      <heli-button type="warning">警告按钮</heli-button>
      <heli-button type="danger">危险按钮</heli-button>
      <heli-button type="success">成功按钮</heli-button>
      <heli-button type="info">信息按钮</heli-button>

      <!-- 带icon的按钮 -->
      <heli-button type="primary" icon="search">
        默认按钮
      </heli-button>
      <heli-button type="primary" icon="search" icon-position="right">
        默认按钮
      </heli-button>
      <!-- 带加载中的按钮 -->
      <heli-button type="primary" icon="search" loading>
        默认按钮
      </heli-button>
      <!-- 带点击的按钮 -->
      <heli-button type="primary" @click="click">默认点击按钮</heli-button>
      <!-- 按钮组 -->
      <heli-button-group>
        <heli-button type="primary" icon="left" @click="click">
          上一页
        </heli-button>
        <heli-button
          type="primary"
          icon="right"
          icon-position="right"
          @click="click"
        >
          下一页
        </heli-button>
      </heli-button-group>
    </div>

    <heli-icon :icon="'search'"></heli-icon>

    <div>
      <heli-row>
        <heli-col span="12">jdkf</heli-col>
        <heli-col span="12">dkf</heli-col>
      </heli-row>
      <heli-row>
        <heli-col span="12">ada</heli-col>
      </heli-row>
      <heli-row>
        <heli-col span="12" offset="12">ada</heli-col>
      </heli-row>
      <heli-row
        gutter="10"
        justify="end"
        :align="'middle'"
        style="height: 100px"
      >
        <heli-col span="6">
          <div style="background:red;">ada</div>
        </heli-col>
        <!-- <heli-col span="6"><div style="background:blue;">ada</div></heli-col> -->
        <heli-col span="6"><div style="background:yellow;">ada</div></heli-col>
        <heli-col span="6"><div style="background:green;">ada</div></heli-col>
      </heli-row>
      <heli-row :gutter="10">
        <heli-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
          ><div class="grid-content bg-purple">kdj</div></heli-col
        >
        <heli-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
          ><div class="grid-content bg-purple-light">sd</div></heli-col
        >
        <heli-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
          ><div class="grid-content bg-purple">dff</div></heli-col
        >
        <heli-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
          ><div class="grid-content bg-purple-light">jkj</div></heli-col
        >
      </heli-row>
    </div>

    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    <div>
      <heli-container>
        <heli-header>Header</heli-header>
        <heli-main>Main</heli-main>
      </heli-container>

      <heli-container>
        <heli-header>Header</heli-header>
        <heli-main>Main</heli-main>
        <heli-footer>Footer</heli-footer>
      </heli-container>

      <heli-container>
        <heli-aside width="200px">Aside</heli-aside>
        <heli-main>Main</heli-main>
      </heli-container>

      <heli-container>
        <heli-header>Header</heli-header>
        <heli-container>
          <heli-aside width="200px">Aside</heli-aside>
          <heli-main>Main</heli-main>
        </heli-container>
      </heli-container>

      <heli-container>
        <heli-header>Header</heli-header>
        <heli-container>
          <heli-aside width="200px">Aside</heli-aside>
          <heli-container>
            <heli-main>Main</heli-main>
            <heli-footer>Footer</heli-footer>
          </heli-container>
        </heli-container>
      </heli-container>

      <heli-container>
        <heli-aside width="200px">Aside</heli-aside>
        <heli-container>
          <heli-header>Header</heli-header>
          <heli-main>Main</heli-main>
        </heli-container>
      </heli-container>

      <heli-container>
        <heli-aside width="200px">Aside</heli-aside>
        <heli-container>
          <heli-header>Header</heli-header>
          <heli-main>Main</heli-main>
          <heli-footer>Footer</heli-footer>
        </heli-container>
      </heli-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "",
      fileList: [
        { name: "xxx 11111111", url: "kjfkdfj" },
        { name: "xxx 22222222", url: "kjfkdfj2323" },
      ],
      value1: "", // new Date()
      value2: "",
      currentPage: 4,
      columns1: [
        {
          type: "selection",
          width: "60px",
        },
        {
          title: "姓名",
          key: "name",
          slot: "name",
        },
        {
          title: "年龄",
          key: "age",
          sortable: "custom", // iview 默认排序， 排序方法 custom（远程排序）
          sortType: "asc",
          sortMethod() {},
        },
        {
          title: "地址",
          key: "address",
        },
        {
          title: "操作",
          key: "operator",
          slot: "operator",
        },
      ],
      data1: [
        {
          name: "王小明",
          age: 18,
          address: "北京市朝阳区芍药居",
        },
        {
          name: "张小刚",
          age: 25,
          address: "北京市海淀区西二旗",
        },
        {
          name: "李小红",
          age: 30,
          address: "上海市浦东新区世纪大道",
        },
        {
          name: "周小伟",
          age: 26,
          address: "深圳市南山区深南大道",
        },
      ],
    };
  },
  methods: {
    change(col, type) {
      console.log(col, type);
    },
    selectAll(selection) {
      console.log(selection);
    },
    selectTable(selection, row) {
      // selection是选中的
      console.log(selection, row);
    },
    click() {
      console.log("click");
    },
    handleExceed(files, fileList) {
      // 超过限制
      console.log("用户传递已经超过预期数量");
      console.log(files, fileList);
    },
    handleChange(file) {
      console.log(file);
    },
    handleSuccess() {},
    handleError() {},
    handleProgress() {},
    beforeUpload(rawFile) {
      let limitSize = rawFile.size / 1024 > 500;
      if (limitSize) {
        console.log("当前超过了最大限制");
        return false;
      } else if (!rawFile.name.endsWith(".jpg")) {
        console.log("文件类型不对");
        return false;
      }
      return true; // 如果false就不上传该文件
    },
    handleCarouselChange() {},
  },
};
</script>

<style lang="scss">
#app {
  overflow-x: hidden;
}
.heli-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.heli-header,
.heli-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.heli-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.heli-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .heli-container {
  margin-bottom: 40px;
}

.heli-container:nth-child(5) .heli-aside,
.heli-container:nth-child(6) .heli-aside {
  line-height: 260px;
}

.heli-container:nth-child(7) .heli-aside {
  line-height: 320px;
}
.content {
  height: 100%;
  width: 100%;
}
</style>
